<template>
  <div>
    <el-card>
      <el-header class="headerStyle">
        <el-input
          v-model="input"
          class="inputStyle"
          placeholder="请输入菜品名称"
          clearable
          @keyup.enter.native="DishesQuery"
        >
          <li
            slot="prefix"
            class="el-input__icon el-icon-search"
            @click="DishesQuery"
          />
        </el-input>
        <el-button
          type="text"
          size="small"
          class="button1Style"
          @click="deleteBatch('批量删除', null)"
          >批量删除</el-button
        >
        <el-button
          type="text"
          size="small"
          class="button2Style"
          style="color: black"
          @click="statusBatch(1)"
          >批量启售<span class="splic"></span
        ></el-button>
        <el-button
          type="text"
          size="small"
          class="button3Style"
          style="color: #ff0000"
          @click="statusBatch(0)"
          >批量停售<span class="splic"></span
        ></el-button>
        <el-button round class="buttonStyle" @click="handleDishes"
          >+新建菜品</el-button
        >
      </el-header>
      <el-main>
        <el-table
          ref="multipleTable"
          :data="dishesData"
          tooltip-effect="dark"
          style="width: 100%"
          class="tableStyle"
          @selection-change="handleSelectionChange"
        >
          <el-table-column 
            type="selection" 
            width="25" 
          />
          <el-table-column 
            prop="name" 
            label="菜品名称" 
          />
          <el-table-column prop="image" label="图片" class="imgStyle">
            <template slot-scope="{ row }">
              <el-image
                :src="getUrl(row.image)"
                style="width: 40px; height: 40px"
              />
            </template>
          </el-table-column>
          <el-table-column 
            prop="categoryName" 
            label="菜品分类" 
          />
          <el-table-column 
            prop="price" 
            label="售价"
          >
          </el-table-column>
          <el-table-column prop="categoryName" label="菜品分类" />
          <el-table-column prop="price" label="售价">
            <template slot-scope="scope">
              <span>￥{{ scope.row.price / 100 }}</span>
            </template>
          </el-table-column>
          <el-table-column 
            prop="status" 
            label="售卖状态"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.status === 0 ? "已售" : "启售" }}</span>
            </template>
          </el-table-column>
          <el-table-column 
            prop="updateTime" 
            label="最后操作时间" 
          />
          <el-table-column 
            prop="click" 
            label="操作" 
            class="lastStyle"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="editDishes(scope.row.id)"
                >修改</el-button
              >
              <el-button
                type="text"
                size="small"
                style="color: black"
                @click="storeSail(scope.row)"
              >
                {{ scope.row.status == 1 ? "停售" : "启售" }}
              </el-button>
              <el-button
                type="text"
                size="small"
                style="color: #ff0000"
                @click="deleteBatch('删除',scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <div class="pageStyle">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
import {
  getDishesPage,
  editDishes,
  deleteDishes,
  dishStatusByStatus,
} from "@/api/dishes";
export default {
  data() {
    return {
      dishesData: [],
      page: 1,
      pageSize: 10,
      input: "",
      total: 0,
      id: "",
      dishState: "",
      deleteState: "",
      Batch: [],
      multipleSelection: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const changeData = {
        page: this.page,
        pageSize: this.pageSize,
        name: this.input ? this.input : undefined,
      };
      await getDishesPage(changeData)
        .then((res) => {
          console.log(res);
          this.dishesData = res.data.records || [];
          this.total = res.data.total;
        })
        .catch((err) => {
          this.$message.error("请求出错了:" + err);
        });
    },
    getUrl(image) {
      return `${process.env.VUE_APP_BASE_API}/common/download?name=${image}`;
    },
    DishesQuery() {
      this.page = 1;
      this.fetchData();
    },
    handleSelectionChange(val) {
      let arr = [];
      val.map((n) => {
        arr.push(n.id);
      });
      this.multipleSelection = arr;
    },
    handleDishes() {
      this.$router.push({
        path: "/editDishes",
        query: {
          action: "ADD",
        },
      });
    },
    editDishes(id) {
      this.$router.push({
        path: "/editDishes",
        query: {
          action: "EDIT",
          id,
        },
      });
    },
    storeSail(ss) {
      this.id = ss.id;
      this.status = ss.status;
      this.$confirm("是否确认改变该菜品的销售状态?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        editDishes({
          id: this.id,
          status: this.status ? 0 : 1,
        }).then((res) => {
          this.$message.success("菜品销售状态更改成功！");
          this.fetchData();
        })
      })
    },
    statusBatch(status) {
      if (this.multipleSelection.length === 0) {
        return this.$message.error("请勾选对象");
      }
      let params = {};
      params.id = this.multipleSelection.join(",");
      params.status = String(status);
      this.dishState = params;
      this.$confirm("是否修改该菜品的销售状态", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        dishStatusByStatus(this.dishState)
          .then((res) => {
            console.log(res);
            if (res.code === 1) {
              this.$message.success("菜品销售状态更改成功！");
              this.fetchData();
            } else {
              this.$message.error(res.msg || "操作失败");
            }
          })
          .catch((err) => {
            this.$message.error("请求出错" + err);
          });
      });
    },
    deleteBatch(type, id) {
      if (type === '批量删除' && id === null) {
        if (this.multipleSelection.length === 0) {
          return this.$message.error("请勾选所需删除的菜品");
        }
      }
      this.$confirm("此操作将永久删除该菜品?", "提示", {
        deleteBatch(action, id) {
          if (this.multipleSelection.length === 0) {
            return this.$message.error("请勾选删除所需删除的菜品");
          }
          this.$confirm("此操作将永久删除该菜品, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            deleteDishes(type === '批量删除' ? this.multipleSelection.join(",") : id).then((res) => {
              console.log(res);
              if (res.code === 1) {
                this.$message.success('删除成功！');
                this.DishesQuery();
              } else {
                this.$message.error(res.msg || '操作失败')
              }
            }).catch((err) => {
              this.$message.error("请求出错" + err);
            });
            deleteDishes(
              action === "批量删除" ? this.multipleSelection.join(",") : id
            )
              .then((res) => {
                console.log(res);
                if (res.code === 1) {
                  this.$message.success("删除成功！");
                  this.DishesQuery();
                } else {
                  this.$message.error(res.msg || "操作失败");
                }
              })
              .catch((err) => {
                this.$message.error("请求出错" + err);
              });
          });
        },
        handleSizeChange(val) {
          this.pageSize = val;
          this.fetchData();
        },
        handleCurrentChange(val) {
          this.page = val;
          this.fetchData();
        },
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.headerStyle {
  position: relative;
  top: 0;
  left: 0;
  .inputStyle {
    width: 200px;
    margin-top: 20px;
    .el-input__icon {
      font-size: 18px;
    }
  }
  .button1Style {
    position: absolute;
    right: 180px;
    top: 25px;
    font-size: 18px;
    height: 15px;
  }
  .button2Style {
    position: absolute;
    right: 280px;
    top: 25px;
    font-size: 18px;
    width: 90px;
    height: 15px;
    .splic {
      margin-left: 20px;
      width: 1px;
      height: 10px;
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
  .button3Style {
    position: absolute;
    right: 400px;
    top: 25px;
    width: 90px;
    height: 15px;
    font-size: 18px;
    .splic {
      margin-left: 20px;
      width: 1px;
      height: 10px;
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
  .buttonStyle {
    position: absolute;
    border: none;
    right: 20px;
    top: 20px;
    width: 140px;
    height: 45px;
    background-color: pink;
  }
  .buttonStyle:hover {
    color: white;
  }
}
.imgStyle {
  width: 50px;
  height: 50px;
}
.pageStyle {
  margin: 0 auto;
  padding-top: 80px;
  padding-bottom: 20px;
  text-align: center;
}
.imgStyle {
  width: 50px;
  height: 50px;
}
.pageStyle {
  margin: 0 auto;
  padding-top: 80px;
  padding-bottom: 20px;
  text-align: center;
}
</style>
